<template>
	<view class="time-select">
		<u-popup v-model="show" mode="bottom" border-radius="10" @close="closeHandle">
			<view class="content">
				<cxView text-align="center"  size="40" fontWeight="600">设置时间</cxView>
				<cxView display="flex" justify-content="space-around" height="100" marginTop="30" align-items="center" >
					<u-input @click="showTimePicker('start')" input-align="center" v-model="startTime" :border="false" disabled placeholder="请设置开始时间" :custom-style	="{'background':'#f4f6fa'}" />
					<cxView padding="0 20" size="30">至</cxView>
					<u-input @click="showTimePicker('end')" input-align="center" v-model="endTime" :border="false" disabled placeholder="请设置结束时间" :custom-style	="{'background':'#f4f6fa'}" />
				</cxView>
				
				<cxView display="flex" justifyContent="space-between" align-content="center" marginTop="50">
					<cxView @confirm="resetHandle" width="40%" :background="$cx.color.cxBgColor" display="flex" justify-content="center" align-items="center" height="80">重置</cxView>
					
					<cxView @confirm="confirmHandle"  width="40%" :background="$cx.color.cxMainColor" display="flex" justify-content="center" align-items="center" height="80">确定</cxView>
				</cxView>
			</view>
		</u-popup>
		<u-picker :params="params" @confirm="confirmTime" :default-time="currentTime" v-model="timePicker" mode="time"></u-picker>
	</view>	
</template>

<script>
	export default {
		name: 'time-select',
		props: {
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				show: false,
				startTime: '',
				endTime: '',
				timePicker: false,
				currentTime: '',
				type: '',
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					// second: true
				},
				
			}
		},
		watch: {
			isShow: {
				handler (newVal, oldValue) {
					this.show = newVal
				}
			},
			immediate: true
		},
		methods: {
			confirmHandle () {
				if (this.startTime && !this.endTime) {
					this.$u.toast('请设置结束时间')
					return false
				}
				if (!this.startTime && this.endTime) {
					this.$u.toast('请设置开始时间')
					return false
				}
				if (this.startTime && this.endTime) {
					if (new Date(this.startTime.replace(/\-/g, '/')).getTime() > new Date(this.endTime.replace(/\-/g, '/'))) {
						this.$u.toast('开始时间不能大于结束时间')
						return false
					}
				}
				this.$emit('setTime', { startTime: this.startTime, endTime: this.endTime })
			},
			closeHandle () {
				this.$emit('close')
			},
			resetHandle () {
				this.startTime = ''
				this.endTime = ''
			},
			showTimePicker (type) {
				this.type = type
				if (type === 'start') {
					this.currentTime = this.startTime
				} else if (type === 'end') {
					this.currentTime = this.endTime
				}
				this.timePicker = true
			},
			confirmTime (data) {
				// console.log(data)
				if (this.type === 'start') {
					// this.startTime = data.year + '-' + data.month + '-' + data.day
					this.startTime = data.hour + ':' + data.minute 
				} else if (this.type === 'end') {
					// this.endTime = data.year + '-' + data.month + '-' + data.day
					this.endTime = data.hour + ':' + data.minute 
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-select {
		.content {
			padding: 40rpx;
			.title {
				
			}
			
			.actions {
				.btn {
					flex: 1;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					&.reset {
						background-color: #f5f5f5;
						color: #666666;
						margin-right: 30rpx;
					}
					&.confirm {
						background-color: #3875F6;
						color: #ffffff;
					}
				}
			}
		}
	}
</style>